:root {
  --main-color: #ffffff;
  --second-color: #fafafa;
  --main-text-color: #000000;
  --bar-color: #8dc26f;
}

@primarycolor: var(--main-color);
@secondcolor: var(--second-color);
@color3: var(--bar-color);
@mintextcolor: var(--main-text-color);

.write-article-page {
  // display: flex;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: @primarycolor;
  .top-bar {
    height: 5.334rem;
    padding: 0 27px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .article-title-left {
      padding-left: 14px;

      input {
        font-size: 24px;
        outline: none;
      }
    }

    .top-right {
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 330px;

      .switch {
        width: 20px;
        height: 20px;
      }

      .personal-image {
        background-color: #8dc26f;
        width: 40px;
        height: 40px;
        border-radius: 40px;
      }

      .state {
        display: inline-block;
      }

      .draft-box {
        background: @color3;
        width: 55px;
        margin: 5% 0;
        border: none;
        border-radius: 3px;
        padding: 5px;
        color: @primarycolor; //字體-白
        font-size: 14px;
        cursor: pointer;
      }

      .release {
        background: whitesmoke;
        width: 45px;
        margin: 5% 0;
        border: @color3 2px solid;
        border-radius: 3px;
        padding: 3px;
        color: rgb(94, 94, 94);
        font-size: 14px;
        cursor: pointer;
      }
    }
  }

  .whole-article {
    background-color: whitesmoke;
    display: flex;
    flex-direction: column;
    flex: auto;
    .tools-part {
      border-top: lightgray 2px solid;
      border-bottom: lightgray 2px solid;
      background-color: white;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .tool {
        margin: 3px;
        width: 34px;
        padding: 0 7px;
        transition: opacity 0.25s;
        .icon {
          width: 100%;
          height: 100%;
          display: block;
        }
      }

      .button {
        color: #333;
        background-color: transparent;
        font-size: 17px;
        font-weight: 400;
        line-height: 1.4;
        text-transform: uppercase;
        text-align: center;
        border: 0;
      }
    }

    .article-part {
      display: flex;
      flex: auto;

      .writing {
        flex: 0 0 50%;

        textarea {
          margin-left: 5px;
          overflow: scroll;
          outline: none;
          height: 100%;
          width: 100%;
          resize: none;
          white-space: pre;
          border: 1px solid var(--bar-color);
          border-radius: 3px;
        }
      }

      .showing {
        flex: 0 0 50%;
        padding: 10px;
        ul li,
        blockquote {
          list-style: none;
          margin-left: 35px;
        }

        ol li {
          list-style-type: style;
          margin-left: 50px;
        }
      }
    }
  }
}
